<template>
	<view>
		<zero-loading type="circle" v-if="loading"></zero-loading>
		<view class="title "></view>
		<view class="padding-bottom-sm padding-top-sm ">
			<view class="cu-bar solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-titles text-olive"></text>
					<text class="text-white text-md">{{name}}</text>
				</view>
				<view class="action" @tap="loadAll()">
					<text class="cuIcon-refresh text-icon-size text-olive "></text>
				</view>
			</view>

			<view class="padding-xs flex align-center">
				<view class=" flex-sub text-right text-grey">猪只个数:</view>
				<view class=" flex-treble text-right justify-center">
					<slider :value="pig_num" block-size="20" step="1" @change=" pigNumSliderChange " min="0" max="50"
						activeColor="#39b54a" block-color="#39b54a" show-value />
				</view>
			</view>

			<view v-if="mode==2" class="padding-xs flex align-center">
				<view class=" flex-sub text-right text-grey">仔猪个数:</view>
				<view class=" flex-treble text-right justify-center">
					<slider :value="son" block-size="20" step="1" @change=" sonSliderChange " min="0" max="50"
						activeColor="#39b54a" block-color="#39b54a" show-value />
				</view>
			</view>

			<view class="cu-bar solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-titles text-olive"></text>
					<text class="text-white text-md">猪只档案</text>
				</view>
				<view class="action" @tap="onAddPig()">
					<text class="text-sm text-olive padding-left-xs">添加猪只</text>
					<!-- <text class="cuIcon-roundadd  text-olive "></text> -->

				</view>
			</view>


			<view class="padding--left-sm padding--right-sm align-center">
				<view class="flex text-center  margin-sm">
					<view class="flex-treble  text-center">
						<text class="text-sm text-grey">耳标</text>
					</view>
					<view class="flex-twice  text-center">
						<text class="text-sm text-grey">猪种</text>
					</view>
					<view class="flex-twice  text-center">
						<text class="text-sm text-grey">重量(kg)</text>
					</view>
					<view class="flex-sub  text-right">

					</view>
				</view>
			</view>
			<scroll-view scroll-y="true" class="scroll-Y " :style='{ height: innerScrollHeight }'>



				<view class="padding--left-sm padding--right-sm align-center">
					<block v-for="(item, idx) in pigList" :key="idx">
						<view class="flex text-center node-pannel margin-sm padding-top-xs padding-bottom-xs"
							hover-class="opcity" hover-stay-time="150" @tap="onEditPig(item)">
							<view class="flex-treble  text-center">
								<text class="text-sm text-white">{{item.earmark}}</text>
							</view>
							<view class="flex-twice  text-center">
								<text class="text-sm text-white">{{item.pig_type}}</text>
							</view>
							<view class="flex-twice  text-center">
								<text class="text-sm text-white">{{item.weight}}</text>
							</view>
							<view class="flex-sub  text-center" @tap.stop="onDeletePig(item)">
								<text class="cuIcon-backdelete text-orange"></text>
							</view>
						</view>
					</block>

				</view>

			</scroll-view>

		</view>
		<view class="padding-left-lg padding-right-lg">
			<button @tap="onSetPigNum" class="cu-btn block bg-blue margin-tb-sm lg">
				<text class="iconfont icon-shouye1 "></text>
				<text class="text-md padding-left-xs"> 保存猪只个数 </text>
			</button>
		</view>

		<view class="cu-modal bottom-modal" :class="showMenu?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">

					<view class="action text-gray" @tap="hideModal">取消</view>
					<view class="action text-green" @tap="confirmSetPig">保存</view>
				</view>

				<view class="padding flex ">
					<view class=" flex-sub flex align-center justify-center">
						<text class="text-center text-grey ">耳标:</text>
					</view>
					<view class=" flex-treble text-center text-grey">
						<view class="uni-input-wrapper">
							<input v-model="earmark" class="uni-input"
								style="height: 45px;line-height: 35px;border: 1px solid #aaa;font-size: 20px;border-radius: 10px;"
								 type="text" placeholder="" />
						</view>
					</view>
				</view>

				<view class="padding flex ">
					<view class=" flex-sub flex align-center justify-center">
						<text class="text-center text-grey ">猪种:</text>
					</view>
					<view class=" flex-treble text-center text-grey">
						<block v-for="(item, idx) in SYS_PIG_TYPE_LIST" :key="idx">
							<button @tap="onTabPigType(item.data_text)" :class="pig_type==item.data_text?'':'line-grey'"
								class="cu-btn bg-green shadow sm margin-right-xs">{{item.data_text}}</button>
						</block>

					</view>
				</view>

				<view class="padding flex ">
					<view class=" flex-sub flex align-center justify-center">
						<text class="text-center text-grey ">重量(kg):</text>
					</view>
					<view class=" flex-treble text-center text-grey">
						<view class="uni-input-wrapper">
							<input v-model="weight" class="uni-input"
								style="height: 45px;line-height: 35px;border: 1px solid #aaa;font-size: 20px;border-radius: 10px;"
								maxlength="4" type="digit" placeholder="" />
						</view>
					</view>
				</view>

				<view class="padding flex justify-begin">

				</view>
				<view class="padding flex justify-begin">

				</view>

			</view>
		</view>

	</view>

</template>

<script>
	import * as api from 'common/api.js';
	const moment = require("../../common/moment.min.js");
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import * as util from '../../common/util.js'
	import {
		API_HEAD
	} from '../../common/api.js'
	export default {
		data() {
			return {
				scrollHeight: 0,
				innerScrollHeight: 0,
				loading: false,
				showMenu: false,

				from: '',
				farmid: '',
				farmname: '',
				houseid: '',
				housename: '',
				hnum: '',
				sn: '',
				pig_num: 0,
				son: 0,
				mode: 0,

				pigList: [],

				pig_id: '',
				earmark: '',
				weight: 0,
				pig_type: '',

				SYS_PIG_TYPE_LIST: []
			}
		},
		onReady() {
			var that = this
			// 计算scroll-view高度
			uni.getSystemInfo({
				success: resu => {
					//console.info("窗口高度:", resu.windowHeight)
					const query = uni.createSelectorQuery()
					query.select('.title').boundingClientRect()
					query.exec(res => {
						console.info("resu.windowHeight:", resu.windowHeight)
						console.info("顶部下拉区域:", res[0].height)
						var ext_height = (that.mode == 2 ? 53 : 0)
						this.innerScrollHeight = resu.windowHeight - res[0].height - 65 - 53 -
							ext_height - 65 - 35 -
							70 - 20 + 'px';
					})
				}
			})
		},
		onLoad(option) {
			console.info("load set_pig", option)
			if (option.from != '') {
				this.from = option.from
			}
			if (option.farmid != '') {
				this.farmid = option.farmid
			}
			if (option.farmname != '') {
				this.farmname = option.farmname
			}
			if (option.houseid != '') {
				this.houseid = option.houseid
			}
			if (option.housename != '') {
				this.housename = option.housename
			}
			if (option.hnum != '') {
				this.hnum = option.hnum
			}
			if (option.sn != '') {
				this.sn = option.sn
			}
			if (option.pig_num != '') {
				this.pig_num = option.pig_num
			}
			if (option.son != '') {
				this.son = option.son
			}
			if (option.mode != '') {
				this.mode = option.mode
			}
		},
		onShow: function() {
			console.info("show set_pig")
			uni.setNavigationBarTitle({
				title: "栏位猪只维护"
			});
			this.name = this.housename + this.hnum
			//加载
			this.loadAll()
		},
		methods: {
			showModal() {
				this.showMenu = true
			},
			hideModal() {
				console.info("hideModal")
				this.showMenu = false
			},
			pigNumSliderChange(e) {
				console.log('pig_num value 发生变化：' + e.detail.value)
				this.pig_num = e.detail.value
			},
			sonSliderChange(e) {
				console.log('son value 发生变化：' + e.detail.value)
				this.son = e.detail.value
			},
			onTabPigType(str) {
				this.pig_type = str
			},
			onAddPig() {
				this.earmark = ''
				this.pig_type = ''
				this.weight = 0
				this.pig_id = ''
				this.showModal()
			},
			onEditPig(item) {
				this.earmark = item.earmark
				this.pig_type = item.pig_type
				this.weight = item.weight
				this.pig_id = item.id
				this.showModal()
			},
			onDeletePig(item) {
				var that = this
				uni.showModal({
					title: '提示',
					content: '请注意,您即将删除猪只档案:' + item.earmark + ',您的操作将会被系统记录',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.deletePig(item)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			loadAll() {
				var that = this
				that.loadFeedNode()
				that.loadSysPigType()
				that.getPig(that.sn).then(function(res) {
					if (res.code >= 0) {
						that.pigList = res.data
					}
				});
			},
			loadFeedNode() {
				var that = this
				var token = getApp().getToken()
				api.myRequest({
					url: '/Api/Device/Feednode',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {
						sn: that.sn,
					},
				}, false).then(res => {
					if (res.code >= 0) {
						var list = res.data;
						if (list.length > 0) {
							var item = list[0];
							that.sn = item.sn
							that.addr = item.addr
							that.tn = item.tn
							that.hnum = item.hnum
							that.mode = item.mode
							that.day = item.day
							that.pig_num = item.pig_num ? item.pig_num : 0
							that.son = item.son ? item.son : 0
						}

					} else {

					}
				}).catch(err => {
					console.log(err)
				})
			},
			loadSysPigType() {
				var that = this
				var token = getApp().getToken()
				api.myRequest({
					url: '/Api/Dictionary',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {
						code: "SYS_PIG_TYPE",
					},
				}, false).then(res => {
					if (res.code >= 0) {
						var list = res.data;
						that.SYS_PIG_TYPE_LIST = list

					} else {

					}
				}).catch(err => {
					console.log(err)
				})
			},
			getPig(sn) {
				var promise = new Promise(function(resolve, reject) {
					var token = getApp().getToken()
					api.myRequest({
						url: '/Api/Pig',
						method: 'GET',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'Authorization': 'Bearer ' + token + ''
						},
						data: {
							sn: sn,
						},
					}, false).then(res => {
						resolve(res);
					}).catch(err => {
						console.log(err)
						reject(err);
					})
				});
				return promise;
			},
			onSetPigNum() {
				var that = this
				that.loading = true
				that.setPigNum(that.sn, that.pig_num, that.son).then(function(res) {
					that.loading = false
					if (res.code >= 0) {
						uni.showToast({
							title: '设置成功',
							icon: 'success',
							duration: 2000
						});
						that.loadAll()
					} else {
						uni.showModal({
							title: '失败',
							content: res.msg,
							showCancel: false
						})
					}
				});
			},
			setPigNum(sn, pig_num, son) {
				var promise = new Promise(function(resolve, reject) {
					var token = getApp().getToken()
					api.myRequest({
						url: '/Api/Pig/PigNum',
						method: 'PUT',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'Authorization': 'Bearer ' + token + ''
						},
						data: {
							sn: sn,
							pig_num: pig_num,
							son: son
						},
					}, false).then(res => {
						resolve(res);
					}).catch(err => {
						console.log(err)
						reject(err);
					})
				});
				return promise;
			},
			confirmSetPig() {
				var that = this
				var token = getApp().getToken()
				var method = ''
				if (that.pig_id == '') {
					method = 'POST'
				} else {
					method = 'PUT'
				}
				that.hideModal()
				that.loading = true
				api.myRequest({
					url: '/Api/Pig',
					method: method,
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {
						id: that.pig_id,
						pig_type: that.pig_type,
						earmark: that.earmark,
						weight: that.weight,
						sn:that.sn,
						addr:that.addr,
					},
				}, false).then(res => {
					that.loading = false
					if (res.code >= 0) {
						uni.showToast({
							title: '设置成功',
							icon: 'success',
							duration: 2000
						});
						that.loadAll()
					} else {
						uni.showModal({
							title: '失败',
							content: res.msg,
							showCancel: false
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			deletePig(item){
				var that = this
				var token = getApp().getToken()
				that.loading = true
				api.myRequest({
					url: '/Api/Pig',
					method: 'DELETE',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {
						id: item.id
					},
				}, false).then(res => {
					that.loading = false
					if (res.code >= 0) {
						uni.showToast({
							title: '删除成功',
							icon: 'success',
							duration: 2000
						});
						that.loadAll()
					} else {
						uni.showModal({
							title: '失败',
							content: res.msg,
							showCancel: false
						})
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.opcity {
		opacity: 0.8;
	}

	.node-pannel {
		/* min-height: 180rpx; */
		border-radius: 5rpx;
		/* opacity: 0.9; */
		/* background: url("https://www.hozenn.com/iot/img/house.png") 80% 50% / 40% no-repeat linear-gradient(to top, rgba(255, 255, 255, 0.95)); */
		/* background-image:linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),url('https://www.hozenn.com/iot/img/house.png'); */
		background-repeat: no-repeat;
		background-size: 20%;
		background-position: 55% 50%;
		background-color: rgba(100, 100, 100, 0.3);
	}

	.bg-pannel {
		border-radius: 15rpx;
		background-color: rgba(100, 100, 100, 0.3);
	}
</style>